<template>
    <div class="chart_container" ref="chart">

    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const chart = ref()


onMounted(() => {
    let myChart = echarts.init(chart.value)
    myChart.setOption({
        series: [{
            type: 'liquidFill',
            data: [0.5, 0.4, {
                value: 0.3,
                itemStyle: {
                    color: 'red',
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {
                        opacity: 0.9
                    }
                }
            }]
        }]
    })
})
</script>

<style scoped lang="scss">
.chart_container {
    width: 100%;
    height: 100%;
}
</style>